<template>
  <div
    class="site-wrapper"
    :class="{ 'site-sidebar--fold': sidebarFold }"
    v-loading.fullscreen.lock="loading"
    element-loading-text="拼命加载中">
    <template v-if="!loading">
      <!-- <van-pull-refresh v-model="isLoading" @refresh="onRefresh"> -->
        <div class="site-content__wrapper" :style="{ 'max-height': documentClientHeight + 'px' }">
          <div id="content-box">
            <div class="carousel-box">
              <van-swipe :autoplay="3000" indicator-color="white">
                <van-swipe-item>
                  <div class="swipe-item-box">
                    <div class="item1">1</div>
                  </div>
                </van-swipe-item>
                <van-swipe-item>
                  <div class="swipe-item-box">
                    <div class="item1">2</div>
                  </div>
                </van-swipe-item>
                <van-swipe-item>
                  <div class="swipe-item-box">
                    <div class="item1">3</div>
                  </div>
                </van-swipe-item>
              </van-swipe>
            </div>
            <!-- <img src="~@/assets/img/bg.png" class="img" /> -->
            <div class="cell-box">
              <van-row>
                <van-col span="24">
                  <h2 class="cell-title">基础功能</h2>
                </van-col>
              </van-row>
              <van-row class="gongge-row-border">
                <van-col span="8" class="col-menu">
                  <div v-on:click="jumpHref('sys/menu')">
                    <icon-svg name="day" class="menu-btn"></icon-svg>
                    <span class="span-text">倒计时</span>
                  </div>
                </van-col>
                <van-col span="8" class="col-menu">
                  <icon-svg name="job" style="width:2rem !important;" class="menu-btn"></icon-svg>
                  <span class="span-text">系统公告</span>
                </van-col>
                <van-col span="8" class="col-menu">
                  <icon-svg name="editor" style="width:2rem !important;" class="menu-btn"></icon-svg>
                  <span class="span-text">我的流程</span>
                </van-col>
                <van-col span="8" class="col-menu">
                  <icon-svg name="editor" style="width:2rem !important;" class="menu-btn"></icon-svg>
                  <span class="span-text">我的流程</span>
                </van-col>
                <van-col span="8" class="col-menu">
                  <icon-svg name="editor" style="width:2rem !important;" class="menu-btn"></icon-svg>
                  <span class="span-text">费用报销</span>
                </van-col>
                <van-col span="8" class="col-menu">
                  <icon-svg name="editor" style="width:2rem !important;" class="menu-btn"></icon-svg>
                  <span class="span-text">印章申请</span>
                </van-col>
                <van-col span="8" class="col-menu">
                  <icon-svg name="editor" style="width:2rem !important;" class="menu-btn"></icon-svg>
                  <span class="span-text">日程</span>
                </van-col>
                <van-col span="8" class="col-menu">
                  <icon-svg name="editor" style="width:2rem !important;" class="menu-btn"></icon-svg>
                  <span class="span-text">印章申请</span>
                </van-col>
                <van-col span="8" class="col-menu">
                  <div>
                    <icon-svg name="more" style="width:2rem !important;" class="menu-btn"></icon-svg>
                    <span class="span-text">更多</span>
                  </div>
                </van-col>
              </van-row>
              <van-collapse v-model="activeName">
                <van-collapse-item title="采购模块" name="1">
                  <van-row class="gongge-row-border">
                    <van-col span="8" class="col-menu">
                      <div>
                        <icon-svg name="shouye" class="menu-btn"></icon-svg>
                        <span class="span-text">供应商</span>
                      </div>
                    </van-col>
                    <van-col span="8" class="col-menu">
                      <icon-svg name="editor" style="width:2rem !important;" class="menu-btn"></icon-svg>
                      <span class="span-text">材料合同</span>
                    </van-col>
                    <van-col span="8" class="col-menu">
                      <div>
                        <icon-svg name="more" style="width:2rem !important;" class="menu-btn"></icon-svg>
                        <span class="span-text">更多</span>
                      </div>
                    </van-col>
                  </van-row>
                </van-collapse-item>
                <van-collapse-item title="销售模块" name="2">
                  <van-row class="gongge-row-border">
                    <van-col span="8" class="col-menu">
                      <div v-on:click="jumpHref('sys/menu')">
                        <icon-svg name="day" class="menu-btn"></icon-svg>
                        <span class="span-text">倒计时</span>
                      </div>
                    </van-col>
                    <van-col span="8" class="col-menu">
                      <icon-svg name="editor" style="width:2rem !important;" class="menu-btn"></icon-svg>
                      <span class="span-text">材料合同</span>
                    </van-col>
                    <van-col span="8" class="col-menu">
                      <div>
                        <icon-svg name="more" style="width:2rem !important;" class="menu-btn"></icon-svg>
                        <span class="span-text">更多</span>
                      </div>
                    </van-col>
                  </van-row>
                </van-collapse-item>
                <van-collapse-item title="财务管理" name="3">
                  <van-row class="gongge-row-border">
                    <van-col span="8" class="col-menu">
                      <div>
                        <icon-svg name="more" style="width:2rem !important;" class="menu-btn"></icon-svg>
                        <span class="span-text">科目管理</span>
                      </div>
                    </van-col>
                    <van-col span="8" class="col-menu">
                      <div>
                        <icon-svg name="day" class="menu-btn"></icon-svg>
                        <span class="span-text">报销管理</span>
                      </div>
                    </van-col>
                    <van-col span="8" class="col-menu">
                      <icon-svg name="editor" style="width:2rem !important;" class="menu-btn"></icon-svg>
                      <span class="span-text">主材付款</span>
                    </van-col>
                  </van-row>
                </van-collapse-item>
              </van-collapse>
            </div>
          </div>
        </div>
      <!-- </van-pull-refresh> -->
      <van-tabbar v-model="active" active-color="#07c160">
        <van-tabbar-item icon="points">功能</van-tabbar-item>
        <van-tabbar-item icon="aim">监控</van-tabbar-item>
        <van-tabbar-item icon="description">报表</van-tabbar-item>
        <van-tabbar-item icon="contact">我的</van-tabbar-item>
      </van-tabbar>
    </template>
  </div>
</template>

<script>
import { Row, Col, Tabbar, TabbarItem, Icon, Swipe, SwipeItem, Collapse, CollapseItem, PullRefresh, Toast } from 'vant'
import { setTimeout } from 'timers'
export default {
  components: {
    [Row.name]: Row,
    [Col.name]: Col,
    [Tabbar.name]: Tabbar,
    [TabbarItem.name]: TabbarItem,
    [Icon.name]: Icon,
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    [Collapse.name]: Collapse,
    [CollapseItem.name]: CollapseItem,
    [PullRefresh.name]: PullRefresh,
    [Toast.name]: Toast
  },
  computed: {
    documentClientHeight: {
      get () { return this.$store.state.common.documentClientHeight - 50 },
      set (val) { this.$store.commit('common/updateDocumentClientHeight', val) }
    },
    sidebarFold: {
      get () { return this.$store.state.common.sidebarFold }
    }
  },
  data () {
    return {
      loading: true,
      active: 0,
      activeName: [],
      isLoading: false
    }
  },
  mounted () {
    this.resetDocumentClientHeight()
  },
  methods: {
    onRefresh () {
      setTimeout(() => {
        this.$toast('刷新成功')
        this.isLoading = false
      }, 500)
    },
    jumpHref (param) {
      this.$router.push({ name: param })
    },
    // 重置窗口可视高度
    resetDocumentClientHeight () {
      this.documentClientHeight = document.documentElement['clientHeight']
      window.onresize = () => {
        this.documentClientHeight = document.documentElement['clientHeight']
      }
      window.setTimeout(this.loading = false, 1000)
    }
  }
}
</script>

<style lang="scss">
body {
  background: #eaeaea;
}
.img {
  width: 100%;
  opacity: 0.8;
}
#content-box {
  overflow: scroll;
}
.col-menu {
  height: 5rem;
  text-align: center;
  background: #fff;
  border-left: 1px solid #eee;
  border-bottom: 1px solid #eee;
}
.cell-title {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  color: rgba(69,90,100,.6);
  padding: 15px;
  background: #fff;
}
.menu-btn {
  width: 3rem !important;
  height: 3rem !important;
  margin: 0 auto;
  display: block;
}
.span-text {
  color: #5c5c5c;
  font-size: 12px;
}
.site-wrapper {
  min-width: auto;
}
.gongge-row-border {
  border-top: 1px solid #eee;
  border-right: 1px solid #eee;
}
.site-content__wrapper {
  width: 98%;
  padding-top: 0px;
  padding-left: 0px;
  margin-left: 0px;
  overflow: scroll;
}
.carousel-box {
  height: 170px;
}
.swipe-item-box {
  text-align:center;
  line-height:170px;
}
.item1 {
  width: 98%;
  height: 160px;
  margin: 5px auto;
  border-radius: 20px;
  background: #39a9ed;
}
.van-collapse-item__content {
  padding: 0px;
}
</style>